import Header from "./../../components/Header";
import {Row, Col} from "./../../rsuite";
import {Link} from "react-router";
import {connect} from "react-redux";
import NoData from "./../../components/nodata";
import Search from "./../../components/search";
import Panel from "./../../elements/Panel";
import Pagination from "./../../components/Pagination//";
import {Config} from "./../../libs/";
import Lang from "./../../libs/i18";
import {URL, pureUrl, md5Url} from "./../../libs/Url";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import {fetch, enable_delete_btn, fetch_remove, selectAllItem, selectItem} from "../../actions";
import DownDrop from "./../../components/category";

const News = React.createClass({
    getInitialState(){
        return {}
    },
    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(fetch({url: URL.CATEGORY_FIND}));
        dispatch(fetch({url: URL.NEWS_FIND}));
    },
    search(keyword){
        const {dispatch} = this.props;
        dispatch(fetch({keyword, url: URL.NEWS_FIND}))
    },
    perPage(arg){
        const {dispatch} = this.props;
        dispatch(fetch(Object.assign({}, {url: URL.NEWS_FIND}, arg || {})))
    },
    handleSelect(eventKey){
        const {dispatch} = this.props;
        dispatch(fetch({type: eventKey, url: URL.NEWS_FIND}))
    },
    render(){
        const self = this;
        const {dispatch, user} = this.props, state = this.state;
        const data = self.props[md5Url.NEWS_FIND] || {},
            data_category = self.props[md5Url.CATEGORY_FIND] || {};
        (!data.list && (data.list = []));
        (!data_category.list && (data_category.list = []));

        return (
            <Panel>
                <Header>{Lang.menus.NEWS_LIST}</Header>
                <div className="table-list-head row">
                    <Col xs={6} md={6}>
                        <Link
                            className='btn btn-primary btn-sm'
                            to={Config.MENUS.NEWS_ADD}>
                            <i className="fa fa-plus"></i> {Lang.NEWS_LIST.create}
                        </Link>
                        <button
                            disabled={(self.props[PAGE_SUBJECT.NEWS].enable_delete_btn == 0 )}
                            onClick={(e)=> {
                                if (confirm(Lang.NEWS_LIST.delete_confirm)) {
                                    dispatch(fetch_remove({
                                        url: URL.NEWS_DELETE,
                                        target: md5Url.NEWS_FIND,
                                        ids: _.pluck(_.filter(data.list, (item)=> {
                                            return item.checked;
                                        }), 'id').join(',')
                                    }))
                                }
                            }}
                            className="btn btn-default btn-sm"
                        >{Lang.NEWS_LIST.delete}
                        </button>
                    </Col>
                    <Col xs={6} md={3} mdOffset={3}>
                        <Search submit={this.search}/>
                    </Col>
                </div>
                <Row>
                    <Col xs={12} md={12}>
                        <table className="table table-bordered table-striped general-table">
                            <thead>
                            <tr>
                                <th style={{width: '50px'}}>
                                    <input type="checkbox" onClick={(e)=> {
                                        const self = this;
                                        dispatch(selectAllItem(md5Url.NEWS_FIND, e.target.checked));
                                        dispatch(enable_delete_btn(PAGE_SUBJECT.NEWS, {
                                            num: (e.target.checked ? self.props[md5Url.NEWS_FIND].list.length : 0),
                                            all: true
                                        }));
                                    }}/>
                                </th>
                                <th style={{width: '60px'}}>NO.</th>
                                <th>{Lang.NEWS_LIST.header.title}</th>
                                <th>
                                    <DownDrop
                                        label={ state._category || Lang.NEWS_LIST.header.category }>
                                        <li>
                                            <a href="javascript:void(0);" onClick={()=> {
                                                self.perPage({
                                                    classifyid: '',
                                                });
                                                self.setState({
                                                    _category: ''
                                                })
                                            }}>所有</a>
                                        </li>
                                        {
                                            data_category.list.map(function (item, index) {
                                                return <li key={index}>
                                                    <a href="javascript:void(0);" onClick={()=> {
                                                        self.perPage({
                                                            classifyid: item.id,
                                                        });
                                                        self.setState({
                                                            _category: item.name
                                                        })
                                                    }}>{item.name}</a>
                                                </li>
                                            })
                                        }
                                    </DownDrop>

                                </th>
                                <th>{Lang.NEWS_LIST.header.time}</th>
                                <th style={{width: '120px'}}>{Lang.NEWS_LIST.header.oper}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                data.list.map((item, index)=> {
                                        item.index = index;
                                        item.isOwn = (item.publisher == user.user.userid);
                                        return <tr key={index}>
                                            <td>
                                                {
                                                    item.isOwn ? <input type="checkbox"
                                                                        checked={(item.checked ? 'checked' : '')}
                                                                        onClick={(e)=> {
                                                                            dispatch(selectItem(md5Url.NEWS_FIND, {
                                                                                index: index,
                                                                                checked: e.target.checked
                                                                            }));
                                                                            dispatch(enable_delete_btn(PAGE_SUBJECT.NEWS, {
                                                                                num: (e.target.checked ? 1 : -1)
                                                                            }));
                                                                        }}
                                                    /> : ''
                                                }

                                            </td>
                                            <td className="hidden-phone">{index + 1}</td>
                                            <td>{
                                                item.isOwn ? <Link
                                                    to={Config.MENUS_ABSOLUTE.NEWS_DETAIL.replace(':id', item.id)}>
                                                    {item.title}
                                                </Link> : item.title
                                            }

                                            </td>
                                            <td>{item.classify && item.classify.name}</td>
                                            <td>{Moment(item.intime).format('YYYY-MM-DD HH:mm:SS')}</td>
                                            <td>

                                                <Link
                                                    className="btn btn-default btn-xs"
                                                    to={Config.MENUS_ABSOLUTE.NEWS_DETAIL.replace(':id', item.id)}>
                                                    <i className="fa fa-search-plus"></i>
                                                </Link>
                                                {
                                                    item.isOwn ? <Link
                                                        className="btn btn-default btn-xs"
                                                        to={Config.MENUS_ABSOLUTE.NEWS_UPDATE.replace(':id', item.id)}>
                                                        <i className="fa fa-pencil"></i>
                                                    </Link> : ''
                                                }
                                                {
                                                    item.isOwn ? <button
                                                        className="btn btn-default btn-xs"
                                                        onClick={
                                                            ()=> {
                                                                if (confirm(Lang.NEWS_LIST.delete_confirm)) {
                                                                    dispatch(fetch_remove({
                                                                        ids: item.id,
                                                                        index: index,
                                                                        url: URL.NEWS_DELETE,
                                                                        target: md5Url.NEWS_FIND
                                                                    }));
                                                                    if (item.checked) {
                                                                        dispatch(enable_delete_btn(md5Url.NEWS_FIND, {num: -1}))
                                                                    }
                                                                }
                                                            }
                                                        }
                                                        type="button">
                                                        <i className="fa fa-times"></i>
                                                    </button> : ''
                                                }


                                            </td>
                                        </tr>
                                    }
                                )
                            }
                            </tbody>
                        </table>
                        {
                            data.list.length ? '' : <NoData />
                        }
                        {
                            (data.list.length ? <Pagination
                                onselect={(num)=> {
                                    dispatch(fetch({url: URL.NEWS_FIND, currentPage: num}))
                                }}
                                page={data.page || 1}
                                pages={data.pages || 10}
                                total={data.page_}
                                onChange={(num)=> {
                                    self.perPage({pageSize: num});
                                }}
                            /> : '' )
                        }
                    </Col>
                </Row >
            </Panel>
        )
    }
});
function select(state) {
    return {
        [md5Url.NEWS_FIND]: state.fetchBySubject[md5Url.NEWS_FIND],
        [PAGE_SUBJECT.NEWS]: state.pageBySubject[PAGE_SUBJECT.NEWS],
        [md5Url.CATEGORY_FIND]: state.fetchBySubject[md5Url.CATEGORY_FIND],
        user: state.user,
    }
}
export default connect(select)(News)
